// jsnp函数
function jsonp(url, arg, fn) {
    // 1.动态创建script标签，设置src属性
    var srpt = document.createElement('script')
    // srpt.src = ''
    // url?callback=方法名&page=1&cout=10

    // 1.1 拼接url中的参数
    var queryString = '' // 这个变量保存参数的字符串形式
    for (var key in arg) {
        queryString += key + '=' + arg[key] + '&'
    }

    // 不能写死，我们就动态创建方法名
    // 随机生成字符
    var funName = 'fun_' + Math.random().toString().substr(3) // fun_0.121212

    window[funName] = fn

    url += '?' + queryString

    // 1.2 设置callback参数，并创建方法

    url += 'callback=' + funName

    srpt.src = url
    // 2.把得到的script标签添加到dom上去
    document.body.appendChild(srpt)
}
$(function () {
    jsonp('https://api.douban.com/v2/movie/in_theaters', {}, function (data) {
        var htmlStr = '';
        var res = data.subjects;
            // console.log(res)
            res.forEach(function (item, index) {
                // console.log(item)
                if (index == 0) {
                    htmlStr += `
                <div class="item active">
                    <div class="row text-center">
                `
                } else {
                    htmlStr += `
            <div class="item">
                <div class="row text-center">
                    `;
                }

                for (var per of item.casts) {
                    console.log(per)
                    if(per.avatars){
                    htmlStr += `
                <!-- ITEM-->
                    <div class="span3">
                        <div class="thumbnail product-item">
                            <a href="#"><img src="${per.avatars.medium}" /></a>
                        </div>
                        <h5>${per.name}</h5>
                        <p><a href="${per.alt}" rol="button" class="btn btn-primary btn-sm">查看详情 >></a></p>
                    </div>
                <!-- ITEM-->
                `
                     }   
                }
                htmlStr += `
                </div>
            </div>
            `;
            })
        $('#myCarousel2 .carousel-inner').html(htmlStr);
    });
    jsonp('https://api.douban.com/v2/movie/top250', {}, function (data) {
        var htmlStr = '';
        var rel = data.subjects;
        var subLink = 'https://movie.douban.com/subject/';
        for (var i = 0; i < 10; i++) {
            htmlStr += `
                <li><a href="https://movie.douban.com/subject/${rel[i].collect_count}">${rel[i].title}</a></li>
            `;
        }
        $('#topTen').html(htmlStr);
    })
    $('#searchBtn').click(function () {
        var searchCon = $('#searchInpt').val().trim();
        var htmlStr = '';
        if (searchCon == '') {
            alert('请输入查询内容！');
        } else {
            jsonp('/v2/movie/search?tag=' + searchCon, {}, function (data) {
                var total = $.parseJSON(data);
                console.log(data)
                htmlStr += `
                    <div class="row">
                        <div class="col-lg-12">
                            <h2>Safari bug warning!</h2>
                            <p class="text-danger">As of v9.1.2, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.</p>
                            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                            <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
                        </div>
                    </div>
                `;
            })
            $('#searchRes').html(htmlStr);
        }
    })
})